<template>
  <el-drawer
    v-model="opened"
    direction="rtl"
    title="系统设置"
    :size="state.device === 'mobile' ? '75%' : '270px'"
  >
    <el-scrollbar
      height="90vh"
      class="wrapper"
    >
      <el-divider content-position="center">主题风格</el-divider>
      <el-row :gutter="5">
        <el-col
          v-for="(item, index) of styleExampleList"
          :key="index"
          :span="12"
          class="example-wrapper"
        >
          <StyleExample
            :checked="item.checked"
            :left-bg="item.leftBg"
            :right-top-bg="item.rightTopBg"
            :right-bottom-bg="item.rightBottomBg"
            @click="exampleClick(item)"
          />
        </el-col>
      </el-row>
      <el-divider content-position="center">布局模式</el-divider>
      <el-row :gutter="5">
        <el-col
          v-for="(item, index) of layoutExampleList"
          :key="index"
          :span="8"
          class="example-wrapper"
        >
          <StyleExample
            :checked="item.checked"
            :left-bg="item.leftBg"
            :right-top-bg="item.rightTopBg"
            :right-bottom-bg="item.rightBottomBg"
            :class="[item.class || '']"
            :tip-text="item.tipText"
            @click="layoutExampleClick(item)"
          />
        </el-col>
      </el-row>
      <el-divider content-position="center">主题颜色</el-divider>
      <div class="colors-wrapper">
        <div
          v-for="(item, index) of primartyColorList"
          :key="index"
          class="color-wrapper"
          :class="{'circle' : item.checked}"
          :style="{'background-color': item.value}"
          @click="colorClick(item)"
        ></div>
      </div>
      <div style="height: 20px"></div>
      <el-divider content-position="center">按钮显示</el-divider>
      <div class="setting-item-wrapper">
        <span>固定顶部导航</span>
        <el-switch
          v-model="state.isFixedNavBar"
          :disabled="state.layoutMode === 'ttb'"
        />
      </div>
      <div class="setting-item-wrapper">
        <span>搜索</span>
        <el-switch v-model="state.actionItem.showSearch" />
      </div>
      <div class="setting-item-wrapper">
        <span>消息</span>
        <el-switch v-model="state.actionItem.showMessage" />
      </div>
      <div class="setting-item-wrapper">
        <span>刷新</span>
        <el-switch v-model="state.actionItem.showRefresh" />
      </div>
      <div class="setting-item-wrapper">
        <span>全屏</span>
        <el-switch v-model="state.actionItem.showFullScreen" />
      </div>
      <el-divider />
    </el-scrollbar>
  </el-drawer>
</template>

<script lang="ts">
import StyleExample from "./components/StyleExample.vue";
import store from "../store";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { usePrimaryColor } from "../hooks";
import { primaryColors } from "../../setting";
export default defineComponent({
  name: "Setting",
  components: {
    StyleExample,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { expose }) {
    const opened = ref(props.show);
    const styleExampleList = reactive([
      {
        leftBg: "#000000",
        rightTopBg: "#ffffff",
        rightBottomBg: "#f5f5f5",
        checked: false,
        themeId: "dark-side",
      },
      {
        leftBg: "#ffffff",
        rightTopBg: "#ffffff",
        rightBottomBg: "#d4d4d4",
        checked: false,
        themeId: "light",
      },
    ]);
    const layoutExampleList = reactive([
      {
        leftBg: "#000000",
        rightTopBg: "#d4d4d4",
        rightBottomBg: "#d4d4d4",
        checked: true,
        layoutId: "ltr",
        tipText: "左右",
      },
      {
        leftBg: "#d4d4d4",
        rightTopBg: "#ffffff",
        rightBottomBg: "#d4d4d4",
        checked: false,
        layoutId: "ttb",
        class: "extra-class",
        tipText: "上下",
      },
      {
        leftBg: "#000000",
        rightTopBg: "#d4d4d4",
        rightBottomBg: "#d4d4d4",
        checked: false,
        layoutId: "lcr",
        class: "extra-class-1",
        tipText: "分栏",
      },
    ]);
    const primartyColorList = reactive(
      primaryColors.map((it) => {
        return {
          name: it,
          value: it,
          checked: false,
        };
      })
    );
    const state = store.state;
    onMounted(() => {
      styleExampleList.forEach((it) => {
        it.checked = state.theme === it.themeId;
      });
      layoutExampleList.forEach((it) => {
        it.checked = state.layoutMode === it.layoutId;
      });
      primartyColorList.forEach((it) => {
        it.checked = state.primaryColor === it.value;
      });
    });
    function openDrawer() {
      opened.value = !opened.value;
    }
    function exampleClick(item: any) {
      styleExampleList.forEach((it) => {
        it.checked = it === item;
      });
      store.changeTheme(item.themeId);
      store.saveSetting({ theme: item.themeId });
    }
    function layoutExampleClick(item: any) {
      layoutExampleList.forEach((it) => {
        it.checked = it === item;
      });
      store.changeLayoutMode(item.layoutId);
      store.saveSetting({ layoutMode: item.layoutId });
    }
    function colorClick(item: any) {
      primartyColorList.forEach((it) => {
        it.checked = it === item;
      });
      usePrimaryColor(item.value);
      store.saveSetting({ primaryColor: item.value });
    }
    expose({
      openDrawer,
    });
    return {
      opened,
      styleExampleList,
      layoutExampleList,
      primartyColorList,
      state,
      exampleClick,
      layoutExampleClick,
      colorClick,
    };
  },
});
</script>

<style lang="scss">
.dark {
  .el-drawer {
    background-color: #272727 !important;
  }
}
.light,
.dark-side,
.blue-side {
  .el-drawer {
    background-color: #ffff !important;
  }
}

.el-drawer__header {
  margin-bottom: 0 !important;
}
</style>
<style lang="scss" scoped>
$width: 60px;
.wrapper {
  .close-wrapper {
    position: absolute;
    right: 8%;
    top: 1%;
    font-size: 20px;
  }
  .colors-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    .color-wrapper {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid #c1c1c1;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin: 10px 8px;
    }
    .circle::after {
      content: "";
      display: block;
      margin: 0 auto;
      margin-top: 25px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgb(3, 190, 50);
      text-align: center;
    }
  }
  .setting-item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 14px;
  }
}
.example-wrapper + .example-wrapper {
  margin-bottom: 30px;
}
</style>
